<style lang="scss" scoped>
.login-container {
  min-height: 100%;
  width: 100%;
  background-color: #333;
  overflow: hidden;

  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }

  h1 {
    color: #ffff;
    text-align: center;
    font-weight: 500;
    padding-bottom: 50px;
  }
}
.demo {
  h2,
  p {
    color: #fff;
  }
}
</style>

<template>
  <div class="login-container">
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
      autocomplete="on"
      label-position="left"
    >
      <h1>登录</h1>
      <el-form-item prop="username">
        <el-input
          ref="username"
          v-model="loginForm.username"
          placeholder="Username"
          name="username"
          type="text"
          tabindex="1"
          autocomplete="on"
        />
      </el-form-item>

      <el-form-item prop="password">
        <el-input
          :key="passwordType"
          ref="password"
          v-model="loginForm.password"
          :type="passwordType"
          placeholder="Password"
          name="password"
          tabindex="2"
          autocomplete="on"
          @keyup.native="checkCapslock"
          @blur="capsTooltip = false"
          @keyup.enter.native="handleLogin"
        />
      </el-form-item>
      <el-button
        :loading="loading"
        type="primary"
        style="width: 100%; margin-bottom: 30px"
        @click.native.prevent="handleLogin"
        >登 录</el-button
      >

      <div class="demo">
        <h2>使用范例：</h2>
        <p>过渡器 格式化时间：{{ nowDate | formatTime }}</p>
        <p>过渡器 2021-06-05 距离今天的时间： {{ nowDate2 | timeAgo }}</p>
        <p>过渡器 格式化货币：￥{{ money | toThousandFilter }}</p>
        <hr />
        <p>工具类 {{ Date1 }} - {{ Date2 }} 持续时间：{{ showData2 }}小时</p>
        <p>工具类 邮箱格式验证 {{ email }}：{{ isEmail }}</p>
        <hr />
        <p>
          常用工具库 lodash.js：<a
            target="_blank"
            href="https://www.lodashjs.com/"
            >点击进入</a
          >
        </p>
        <p>
          日期工具库 day.js：<a
            target="_blank"
            href="https://dayjs.fenxianglu.cn/"
            >点击进入</a
          >
        </p>
        <hr />
        <p>指令 控制按钮权限</p>
        <div>
          <el-button
            v-permission="{ action: 'add', disabled: 'disabled' }"
            type="primary"
            @click="handleAdd"
            >添加</el-button
          >
          <el-button
            v-permission="{ action: 'del', disabled: 'disabled' }"
            type="danger"
            disabled
            @click="handleDel"
            >删除</el-button
          >
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { dateDiff } from "@utils";
import { validEmail } from "@utils/validate";
import { login } from "@api/user";

export default {
  name: "Login",
  components: {},
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "111111",
      },
      loginRules: {
        username: [{ required: true, trigger: "blur" }],
        password: [{ required: true, trigger: "blur" }],
      },
      loading: false,
      passwordType: "password",

      list: [], // 范例字段

      nowDate: new Date(), // 使用范例-格式化时间
      nowDate2: 1622857657000, // 使用范例-距离今天的时间

      money: 100000, // 使用范例-格式化货币

      Date1: "2021-6-10 08:00", // 使用范例-持续时间1
      Date2: "2021-6-10 10:00", // 使用范例-持续时间2

      showData2: 0, // 使用范例

      email: "132456@qq.com", // 使用范例-邮箱号
      isEmail: false, // 使用范例-邮箱号是否正确
    };
  },

  watch: {},

  created() {
    //demo
    this.showData2 = dateDiff(this.Date1, this.Date2, "hours");
    this.isEmail = validEmail(this.email);
  },

  mounted() {
    //username、password 为空时，获取焦点
    if (this.loginForm.username == "") {
      this.$refs.username.focus();
    } else if (this.loginForm.password == "") {
      this.$refs.password.focus();
    }
  },

  methods: {
    /**
     * 用户登录
     * post 请求例子
     */
    handleLogin() {

       sessionStorage.setItem("Token",'2342sdfsdfsd');

       this.$router.push({
          name: "DASHBOARD",
        });

      // this.$refs.loginForm.validate(async (valid) => {
      //   if (!valid) return false;

      //   const { data: resData } = await login();

      //   if (resData.status != 1) return;

      //   sessionStorage.setItem("Token", resData.data.token);

      //   this.$router.push({
      //     name: "",
      //   });

      //   this.$message.success("登录成功");
      // });
    },

    /**
     * get 请求例子
     */
    async queryList() {
      const { data: resData } = await this.$request.get("api/url1", {
        params: {
          pageindex: 1,
          pageLimt: 10,
        },
        headers: {
          isLoading: false, // 开启加载层，默认为 false
        },
      });

      if (resData.status != 1) return;

      this.list = resData.data;
    },

    /**
     * 是否显示密码
     */
    handleShowPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },

    /**
     * 处理删除
     */
    handleDel() {
      this.$message.error("删除");
    },

    /**
     * 处理添加
     */
    handleAdd() {
      this.$message.error("添加");
    },
  },
};
</script>
